
<template>
<div class="div">
  <div>
    <h2 class="h3">工单模板管理</h2>
    <br> <br> <br>
    <a-button type="primary" @click="showModal" class="mb">
      新建
    </a-button>
    <a-input class="input"></a-input>
    &nbsp;&nbsp;&nbsp;
    <a-button class="search">搜索</a-button>
    <br> <br> <br>
    <a-modal v-model="visible" title="Title" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          cancle
        </a-button>
        <a-button key="OK" type="primary" :loading="loading" @click="handleOk">
          OK
        </a-button>
      </template>
       <div>
    工单名称：<a-input  placeholder="请假工单" allow-clear v-model="name"/>
    <br />
    工单自定义字段：<a-textarea height='30px' placeholder="自定义字段[{},{}]" allow-clear v-model="customfield"/>
    <br />
    工单描述：<a-textarea placeholder="请假流程，班主任---->项目经理---->项目经理" allow-clear v-model="description"/>
  </div>
    </a-modal>
  </div>

  <a-modal v-model="visible1" title="Title" on-ok="handleOk"  v-for="i in works" :key="i.id">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          cancle
        </a-button>
        <a-button key="OK" type="primary" :loading="loading" @click="handleOk1(i.id)">
          OK
        </a-button>
      </template>
       <div>
    工单名称：<a-input  placeholder="请假工单" allow-clear v-model="name"/>
    <br />
    <!-- 工单自定义字段：<a-textarea height='30px' placeholder="自定义字段[{},{}]" allow-clear v-model="customfield"/> -->
    <div>
        <label>工单自定义字段：</label>
        <a-textarea
          v-model="editData.customfield"
          placeholder="自定义字段: [{},{}]"
          :auto-size="{ minRows: 3, maxRows: 16 }"
        />
      </div>
    <br />
    工单描述：<a-textarea placeholder="请假流程，班主任---->项目经理---->项目经理" allow-clear v-model="description"/>
  </div>
    </a-modal>

  <table>
    <tr>
      <th class="th1">ID</th>
      <th>工单名称</th>
      <th class="th">自定义字段</th>
      <th>工单描述</th>
      <th>操作</th>
    </tr>
    <tr v-for="i in works" :key="i.id">
      <td>{{i.id}}</td>
      <td>{{i.name}}</td>
      <td>{{i.customfield}}</td>
      <td>{{i.description}}</td>
      <td>
        <a-button class="update" @click="showModal1(i.id)">编辑</a-button>
        <a-button class="del" @click="del(i.id)">删除</a-button>
        <a-button class="add" @click="add(i.id,i.name)">添加审批流</a-button>
      </td>
    </tr>
  </table>

  <!-- <a-table :columns="columns" :data-source="data">
    <a slot="name" slot-scope="text">{{ text }}</a>
  </a-table> -->
  </div>
</template>
<script>


const columns = [
  {
    title: 'ID',
    dataIndex: 'ID',
    key: 'ID',
    scopedSlots: { customRender: 'ID' },
  },
  {
    title: '自定义字段',
    dataIndex: '工单名称',
    key: '工单名称',
    width: 80,
  },
  {
    title: '自定义工单',
    dataIndex: '自定义工单',
    key: '自定义工单',
    ellipsis: true,
  },
  {
    title: '自定义字段',
    dataIndex: '自定义字段',
    key: '自定义字段',
    ellipsis: true,
  },
  {
    title: '工单描述',
    dataIndex: '工单描述',
    key: '工单描述',
    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: '操作',
    key: '操作',
    ellipsis: true,
  },
];


const data = [
  {
    key: '1',
    ID: '1',
    工单名称: 32,
    自定义工单: '喜洋洋爱美羊羊',
    tags: ['nice', 'developer'],
  },
];


import axios from 'axios'
export default {
  data() {
    return {
      data,
      columns,
      loading: false,
      visible: false,
      visible1: false,
      id:'',
      name:'',
      customfield:'',
      description:'',
      works:[],
       editData: {       // 添加和修改用户时，弹出框中进行双向绑定的数据
        username: '',
        password: '123456',
        email:'',
        mobile:''
      },
    };
  },
  created(){
    axios.get('http://127.0.0.1:8000/work/flowconf/').then(res=>{
      this.works=res.data
    })
  },
  methods: {
    add(id,name){
      this.$router.push('/Addproves?id='+id+'&name='+name)
    },

    del(id){
        axios.delete('http://127.0.0.1:8000/work/flowconf/?id='+id).then(res=>{
          console.log(res.data)
          alert(res.data)
        })
      },

    showModal() {
      this.editData = {
        "name": "",
        "customfield": "",
        "description": ""
      }
      this.visible = true;
    },
    showModal1(id){
      this.visible1 = true;
    },
    handleOk(e) {
       axios.post('http://127.0.0.1:8000/work/flowconf/',{'name':this.name,'customfield':this.customfield,'description':this.description}).then(res=>{
        console.log(res.data)
        alert('添加成功')
      })
      this.loading = true;
      setTimeout(() => {
        this.visible = false;
        this.loading = false;
      }, 3000);
    },
    handleOk1(id) {
       axios.put('http://127.0.0.1:8000/work/update/',{'id':id,'name':this.name,'customfield':this.customfield,'description':this.description}).then(res=>{
        console.log(res.data)
        console.log(id)
        alert('修改成功')
      })
      this.loading = true;
      setTimeout(() => {
        this.visible = false;
        this.loading = false;
      }, 3000);
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
};
</script>


<style>
.mb{
  float: left;
}
table{
  width: 1000px;
  height: 200px;
  /* border: 1px solid darkgrey */
}
th{
  background: rgb(223, 219, 219);
  border: 1px solid darkgrey
}
tr,th,td{
  border: 1px solid darkgrey;
  height: 70px;
}
.update{
  width: 65px;
  height: 30px;
  background: rgb(224, 77, 77);
  color: aliceblue;
  margin-bottom: 8px;

}
.del{
  width: 65px;
  height: 30px;
  background: rgb(74, 153, 226);
  color: aliceblue;
  margin-bottom: 8px;
}
.add{
  /* width: 65px;
  height: 30px; */
  background: rgb(37, 168, 43);
  color: aliceblue;
  margin-bottom: 8px;
}
.input{
  width: 200px;

}
.search{
  width: 65px;
  height: 30px;
  background: rgb(74, 153, 226);
  color: aliceblue;
  margin-bottom: 8px;
}
.h3{
  float: left;
}
.div{
  background:  rgb(242, 244, 247);
}
td{
  height: 60px;
}
.th{
  width: 300px;
}
.th1{
  width: 80px;
}
</style>
